<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="450" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        /**
         * Draws a label with an optional subscript.
         * @param {number} x - The x-coordinate of the base character.
         * @param {number} y - The y-coordinate of the base character.
         * @param {string} base - The main character (e.g., 'R', 'I').
         * @param {string} sub - The subscript character (e.g., '1', 'C').
         * @param {string} fontStyle - 'normal' or 'italic'.
         * @param {number} baseSize - Font size for the base character.
         * @param {number} subSize - Font size for the subscript.
         */
        function drawLabel(x, y, base, sub, fontStyle = 'italic', baseSize = 20, subSize = 14) {
            ctx.font = `${fontStyle} ${baseSize}px Times New Roman`;
            const baseMetrics = ctx.measureText(base);
            const baseWidth = baseMetrics.width;
            ctx.fillText(base, x, y);

            if (sub) {
                ctx.font = `${fontStyle} ${subSize}px Times New Roman`;
                // Position subscript to the bottom-right of the base character
                ctx.fillText(sub, x + baseWidth - (baseSize/5), y + 4);
            }
        }

        // Helper function to draw a resistor
        function drawResistor(x, y, width, height) {
            ctx.strokeRect(x - width / 2, y - height / 2, width, height);
        }

        // Helper function to draw a capacitor
        function drawCapacitor(x, y1, y2, plateWidth) {
            const y_center = (y1 + y2) / 2;
            const gap = 8;
            ctx.beginPath();
            // Top wire
            ctx.moveTo(x, y1);
            ctx.lineTo(x, y_center - gap / 2);
            // Bottom wire
            ctx.moveTo(x, y2);
            ctx.lineTo(x, y_center + gap / 2);
            // Plates
            ctx.moveTo(x - plateWidth / 2, y_center - gap / 2);
            ctx.lineTo(x + plateWidth / 2, y_center - gap / 2);
            ctx.moveTo(x - plateWidth / 2, y_center + gap / 2);
            ctx.lineTo(x + plateWidth / 2, y_center + gap / 2);
            ctx.stroke();
        }

        // Helper function to draw a battery
        function drawBattery(x, y1, y2, plateWidth) {
            const y_center = (y1 + y2) / 2;
            const longPlateHeight = plateWidth;
            const shortPlateHeight = plateWidth / 2;
            const gap = 15;
            ctx.beginPath();
            // Connecting wires
            ctx.moveTo(x, y1);
            ctx.lineTo(x, y_center - gap / 2);
            ctx.moveTo(x, y2);
            ctx.lineTo(x, y_center + gap / 2);
            // Plates
            ctx.lineWidth = 2; // Make plates slightly thicker
            ctx.moveTo(x - longPlateHeight / 2, y_center - gap / 2);
            ctx.lineTo(x + longPlateHeight / 2, y_center - gap / 2); // Positive (longer)
            ctx.moveTo(x - shortPlateHeight / 2, y_center + gap / 2);
            ctx.lineTo(x + shortPlateHeight / 2, y_center + gap / 2); // Negative (shorter)
            ctx.stroke();
            ctx.lineWidth = 1.5; // Reset line width
        }
        
        // Helper function for dashed arrow
        function drawDashedArrow(x1, y1, x2, y2, headlen) {
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);

            ctx.save();
            ctx.setLineDash([3, 3]);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            // Stop dashed line just before the arrowhead
            const endX = x2 - (headlen/2) * Math.cos(angle);
            const endY = y2 - (headlen/2) * Math.sin(angle);
            ctx.lineTo(endX, endY);
            ctx.stroke();
            ctx.restore(); 

            // Draw solid arrowhead
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main drawing logic ---
        // Coordinates
        const A = {x: 250, y: 100};
        const B = {x: 250, y: 300};
        const xL = 50; // Left wire x
        const xR2 = 170;
        const xR3 = 330;

        // --- Draw Wires ---
        ctx.beginPath();
        // Main Loop
        ctx.moveTo(xL, A.y); ctx.lineTo(A.x, A.y);
        ctx.moveTo(xL, B.y); ctx.lineTo(B.x, B.y);
        ctx.moveTo(xL, A.y); ctx.lineTo(xL, B.y);
        
        // Parallel branches
        ctx.moveTo(A.x, A.y); ctx.lineTo(xR2, A.y); ctx.lineTo(xR2, B.y); ctx.lineTo(B.x, B.y);
        ctx.moveTo(A.x, A.y); ctx.lineTo(A.x, B.y);
        ctx.moveTo(A.x, A.y); ctx.lineTo(xR3, A.y); ctx.lineTo(xR3, B.y); ctx.lineTo(B.x, B.y);
        ctx.stroke();

        // --- Draw Components (erase wire underneath first) ---
        // Battery (on left wire)
        const bat_y1 = A.y + 60, bat_y2 = B.y - 60;
        ctx.fillStyle = 'white';
        ctx.fillRect(xL - 2, bat_y1 - 2, 4, bat_y2 - bat_y1 + 4);
        ctx.fillStyle = 'black';
        drawBattery(xL, bat_y1, bat_y2, 25);
        
        // Resistor R1 (on top wire)
        const r1_x = 150, r1_w = 60, r1_h = 25;
        ctx.fillStyle = 'white';
        ctx.fillRect(r1_x - r1_w / 2, A.y - r1_h / 2, r1_w, r1_h);
        ctx.fillStyle = 'black';
        drawResistor(r1_x, A.y, r1_w, r1_h);
        
        // Resistor R2 (on R2 branch)
        const r2_y = 200, r2_w = 25, r2_h = 60;
        ctx.fillStyle = 'white';
        ctx.fillRect(xR2 - r2_w / 2, r2_y - r2_h / 2, r2_w, r2_h);
        ctx.fillStyle = 'black';
        drawResistor(xR2, r2_y, r2_w, r2_h);

        // Capacitor C (on C branch)
        ctx.fillStyle = 'white';
        ctx.fillRect(A.x - 20, 192, 40, 16);
        ctx.fillStyle = 'black';
        drawCapacitor(A.x, A.y, B.y, 30);
        
        // Resistor R3 (on R3 branch)
        const r3_y = 240, r3_w = 25, r3_h = 60;
        ctx.fillStyle = 'white';
        ctx.fillRect(xR3 - r3_w / 2, r3_y - r3_h / 2, r3_w, r3_h);
        ctx.fillStyle = 'black';
        drawResistor(xR3, r3_y, r3_w, r3_h);

        // Switch K (on R3 branch)
        const switch_y_pivot = A.y + 40;
        const switch_y_contact = A.y + 70;
        const arm_length = 35;
        const angle_rad = -40 * Math.PI / 180;
        ctx.fillStyle = 'white'; 
        ctx.fillRect(xR3 - 2, switch_y_pivot - 2, 4, switch_y_contact - switch_y_pivot + 4);
        ctx.fillStyle = 'black';
        // Terminals
        ctx.beginPath(); ctx.arc(xR3, switch_y_pivot, 3, 0, 2*Math.PI); ctx.fill();
        ctx.beginPath(); ctx.arc(xR3, switch_y_contact, 3, 0, 2*Math.PI); ctx.fill();
        // Arm
        ctx.beginPath();
        ctx.moveTo(xR3, switch_y_pivot);
        ctx.lineTo(xR3 + arm_length * Math.cos(angle_rad), switch_y_pivot + arm_length * Math.sin(angle_rad));
        ctx.stroke();

        // --- Draw Labels ---
        // Nodes A and B
        ctx.beginPath(); ctx.arc(A.x, A.y, 3, 0, 2*Math.PI); ctx.fill();
        ctx.beginPath(); ctx.arc(B.x, B.y, 3, 0, 2*Math.PI); ctx.fill();
        drawLabel(A.x + 5, A.y + 5, 'A', null, 'normal');
        drawLabel(B.x + 5, B.y + 5, 'B', null, 'normal');
        
        // Components
        drawLabel(xL - 25, 205, 'ε', null, 'normal');
        drawLabel(r1_x - 10, A.y - 15, 'R', '1', 'normal');
        drawLabel(xR2 + 10, 190, 'R', '2', 'normal');
        drawLabel(A.x + 20, 205, 'C', null, 'normal');
        drawLabel(xR3 + 10, r3_y - 40, 'R', '3', 'normal');
        drawLabel(xR3 + arm_length * Math.cos(angle_rad), switch_y_pivot + arm_length * Math.sin(angle_rad) + 15, 'K', null, 'normal');

        // Currents and Arrows
        drawLabel(r1_x - 10, A.y - 28, 'I', '1');
        drawDashedArrow(r1_x + 25, A.y - 10, r1_x - 25, A.y - 10, 8);
        
        drawLabel(xR2 - 30, A.y + 50, 'I', '2');
        drawDashedArrow(xR2 - 10, A.y + 30, xR2 - 10, A.y + 60, 8); 

        drawLabel(A.x - 30, A.y + 50, 'I', 'C');
        drawDashedArrow(A.x - 10, A.y + 30, A.x - 10, A.y + 60, 8);

        drawLabel(xR3 - 35, A.y + 120, 'I', '3');
        drawDashedArrow(xR3 - 10, A.y + 110, xR3 - 10, A.y + 140, 8);

    </script>
</body>
</html>